<template>
        <div class="d-flex" style="width: 100%; height: 33%;">
            <dv-border-box-12 style="width: 100%; height: 99%;">
                <div>
                <div class="d-flex pt-2 pl-2">
                    <span>
                        <i class="iconfont icon-chart-line" />
                    </span>
                    <div class="d-flex">
                        <span class="text mx-2 mt-1">{{title}}</span>
                    </div>
                </div>
                <div id="treebox">
                    <chart id="chartbox"/>
                </div>
            </div>
            </dv-border-box-12>
        </div>
        <div class="d-flex" style="width: 100%; height: 33%;">
            <dv-border-box-12 style="width: 100%; height: 99%;">
              <div>
                <div class="d-flex pt-2 pl-2">
                    <span>
                        <i class="iconfont icon-chart-line" />
                    </span>
                    <div class="d-flex">
                        <span class="text mx-2 mt-1">{{title}}</span>
                    </div>
                </div>
                <div id="treebox">
                  <!--折线图-->
                  <Chartzx/>
                </div>
            </div>
              
            </dv-border-box-12>
        </div>
        <div class="d-flex" style="width: 100%; height: 33%;">
            <dv-border-box-12 style="width: 100%; height: 99%;">
              <div>
                <div class="d-flex pt-2 pl-2">
                    <span>
                        <i class="iconfont icon-chart-line" />
                    </span>
                    <div class="d-flex">
                        <span class="text mx-2 mt-1">{{title}}</span>
                    </div>
                </div>
                <div id="treebox">
                  <!--折线图-->
                  <ChartzxN/>
                </div>
            </div>
            </dv-border-box-12>
        </div>
    
    
  </template>
  
  <script>
  import { defineComponent, reactive, onMounted,ref } from "vue";
  import { ElSelect, ElOption } from 'element-plus';
  import Chart from "./chart/index";
  import Chartzx from "./chart/indexY";
  import ChartzxN from "./chart/indexN";
  export default defineComponent({
    components: {
        Chart,
        Chartzx,
        ChartzxN
    },
      props: {
      title: {
        type: String,
        default: "",
      },
    },
    setup() {
      
      onMounted(() => {
      });
      // 设置数据
     
    },
  });
  </script>
  
  <style lang="scss" scoped>
//   .center {
//     display: flex;
//     flex-direction: column;
//      height:100%;
//     .d-flex
//     {
//      margin-top:4%;
//     }
//     #bar-chart
//     {
//     font-size:25px;
//     width:95%;
//     height:82%; 
//     margin:0px auto;
//     }
//   };
$box-height:100%;
  $box-width:100%;
  .bottomLeft {
    padding: 20px 16px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      border-radius: 10px;
    }
    .text {
      color: #c3cbde;
      
    }
    #treebox
    {
      width:100%;
    }
    #chartbox
    {
      width:100%;
    }
  }
  </style>
  